import React, { useState } from "react";
import TheButton from "@/components/TheButton";
import { SearchOutlined, StarOutlined, UploadOutlined } from '@ant-design/icons';
import {
  Button,
  Table,
  Modal,
  InputNumber,
  Popconfirm,
  Input,
  Pagination,
  Radio,
  Form,
  Switch,
  Tooltip,
  Upload,
  message, Space
} from 'antd';
import { apiGetGoodsInfoPage, apiPlatformActivitySheetExcelImport } from "../../../../../api/activityManager/index.js";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"
import '../style/style.less';

class Goods extends React.Component {
  formRef = React.createRef()

  constructor(props) {
    super(props)
    this.state = {
      capture: false,//拖动元素是否被捕获
      checkStart: false,
      eidtKey: '',
      isDragDisabled: false,
      columns: [{
        title: "商品名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "商品Id",
        dataIndex: "goodsId",
        key: "goodsId",
      },
      {
        title: "规格",
        dataIndex: "attr",
        key: "attr",

      },
      {
        title: "门店",
        dataIndex: "home",
        key: "home",
      },
      {
        title: "原价",
        dataIndex: "skuOriginalPrice",
        key: "skuOriginalPrice",

      }, {
        title: "现价",
        dataIndex: "skuCurrentPrice",
        key: "skuCurrentPrice",

      }, {
        title: "活动价格",
        dataIndex: "activityPrice",
        key: "activityPrice",
      },
      //   {
      //   title: "是否参加活动",
      //   dataIndex: "isJoinActive",
      //   key: "isJoinActive",
      // },
      {
        title: "操作",
      }],
      num: null,
      modalTitle: '添加活动专区',
      isModalVisible: false,
      goodsSku: []
      , checkGoods: [],
      nowStep: -1,
      nowPromotions: null,
      goodsList: [],
      pageNo: 1,
      pageSize: 10,
      totalCount: 0,
      goodsName: '',
      activityType: '',
      clock: false,
      clockTime: null,
    }
  }

  componentWillReceiveProps(nextProps) {
    // console.log(this.state.isProprietary);
    if (nextProps.activityType !== this.state.activityType) {
      if (nextProps.activityType === 'FULL_GIFT') {
        this.state.columns.splice(3, 0, {
          title: "别名",
          dataIndex: "aliasName",
          key: "aliasName",
        })
      } else {
        if (this.state.columns[3].title === '别名') {

          this.state.columns.splice(3, 1)
        }
      }
    }
    this.setState({
      goodsSku: nextProps.goodsSku,
      activityType: nextProps.activityType,
      columns: this.state.columns
    });
  }

  componentDidUpdate(nextProps) {
    // return this.props.activityType !== nextProps.activityType
  }

  componentDidMount() {
    this.setState({
      goodsSku: []
    })

    this.getData()
  }

  async getData() {
    let res = await apiGetGoodsInfoPage({
      pageNo: this.state.pageNo,
      pageSize: this.state.pageSize,
      goodsName: this.state.goodsName,
      storeStatus: 'Y',
      goodsStatus: 'Y',
      reviewStatus: 'T'
    })
    if (res.code === 0) {
      this.setState({
        goodsList: res.data,
        totalCount: res.totalCount
      }, () => {
        let dom = document.getElementById('goodsList')
        dom && (dom.scrollTop = 0)
      })
    } else {
      React.$message({
        type: 'error',
        content: res.message
      })
    }
  }

  reset(fn) {
    this.setState({
      num: null,
      modalTitle: '添加活动专区',
      isModalVisible: false,
      goodsSku: [],
      checkGoods: [],
      nowStep: -1,
      nowPromotions: null,
      pageNo: 1,
      goodsName: '',
      activityType: ''
    }, () => fn && fn())
  }

  onSearch(e) {
    e.preventDefault();
    this.setState({
      goodsName: e.target.value,
      pageNo: 1
    }, () => {
      this.getData()
    })
  }

  // 删除专区内活动选择的活动商品
  delGoods = (row, index) => {
    let self = this;
    let newData = [...this.state.goodsSku]
    let key = row.Promotions
    let PromotionsIndex = newData.findIndex(item => item[0] === key)
    newData[PromotionsIndex][1].splice(index, 1)
    this.setState({ goodsSku: [] }, () => {
      self.setState({ goodsSku: newData })
    })
    this.props.addGoods({ goodsSku: newData })
  }

  // 商品登录
  stick(row, index) {
    let self = this;
    let newData = [...this.state.goodsSku]
    let key = row.Promotions
    let PromotionsIndex = newData.findIndex(item => item[0] === key)
    newData[PromotionsIndex][1].splice(index, 1)
    newData[PromotionsIndex][1].unshift({ ...row })
    this.setState({ goodsSku: [] }, () => {
      self.setState({ goodsSku: newData })
    })
    this.props.addGoods({ goodsSku: newData })
  }

  // 修改商品活动价格
  acPriceChange = (val, sku, index, data, data_index, tr_index) => {
    sku.activityPrice = val
    sku.flag = true
  }
  // 满赠活动设置别名
  aliasChange = (val, sku, index, data, data_index, tr_index) => {
    sku.aliasName = val.target.value
    sku.aliasFlag = true
  }
  // 活动sku是否参加活动
  isJoinChange = (val, sku) => {

    sku.isJoinFlag = val
    if (!val) {
      sku.activityPrice = Number((Number(sku.skuCurrentPrice) / 100))
    }
    let { goodsSku } = this.state
    if (this.state.clock) {
      clearTimeout(this.state.clockTime)
    } else {
      this.state.clock = true
    }
    let clockTime = setTimeout(() => {
      this.props.addGoods({ goodsSku: goodsSku })
      clearTimeout(this.state.clock)
      this.setState({
        clock: false
      })
    }, 500)
    this.setState({
      clockTime
    })
  }
  // 设置满赠门槛
  thresholdPriceChange = (val, index) => {
    const { goodsSku } = this.state
    goodsSku[index][2] = val
    goodsSku[index][3] = val + '' ? true : false
    this.setState({
      goodsSku: goodsSku
    })
  }
  handleOk = () => {
    this.formRef.current.validateFields().then(values => {
      this.setState({ num: values.num }, () => {
        // 添加活动商品专区
        let { goodsSku, num, nowPromotions, modalTitle } = this.state
        let flag = goodsSku.filter(item => item[0] === num)
        if (num === '') return
        if (modalTitle === '添加活动专区') {
          if (flag.length > 0) {
            message.warning('已存在相同数据')
            return
          }
          goodsSku.push([num, [], null, true])
        } else {
          if (flag.length > 0 && num !== nowPromotions) {
            message.warning('已存在相同数据')
            return
          }
          let index = goodsSku.findIndex(item => item[0] === nowPromotions)
          goodsSku[index] = [num, goodsSku[index][1], goodsSku[index][2], goodsSku[index][3], goodsSku[index][4]]
        }

        this.formRef.current.setFieldsValue({ num: null })
        this.setState({
          isModalVisible: false,
          goodsSku
        })
        this.props.addGoods({ goodsSku: goodsSku })
      })
    })
  };
  // 编辑活动专区
  editPromotions = (key, val) => {
    this.setState({
      isModalVisible: true,
      modalTitle: '编辑活动专区',
      num: key,
      nowPromotions: key
    }, () => {
      this.formRef.current.setFieldsValue({ num: key })
    })
  }
  handleCancel = () => {
    this.setState({
      isModalVisible: false
    })
  };

  // 商品批量导入
  importGoods = async (e, index) => {
    // console.log(e.target.files, 'importGoods');
    const activityVo = this.state.goodsSku.map((item, activeIndex) => {
      return {
        activityGoodsVos: item[1].map(goods => {
          return {
            activityGoodsSkuVos: goods.skuInfoVos.map(sku => {
              sku.isJoinFlag = true
              return {
                "goodsId": goods.goodsId,
                "goodsSkuId": sku.goodsSkuId,
                "activityGoodsSkuPrice": !sku.isJoinFlag ? sku.skuCurrentPrice : sku.activityPrice === null ? sku.skuCurrentPrice : Number((Number(sku.activityPrice) * 100).toFixed(0)),
                currentPrice: sku.currentPrice,
                activityGoodsSkuId: sku.activityGoodsSkuId,
                activityGoodsId: sku.activityGoodsId,
                skuAttributes: JSON.stringify(sku.skuAttributes),
                aliasName: sku.aliasName,
                skuEnabled: sku.isJoinFlag ? 1 : 0
              }
            }),
            "goodsId": goods.goodsId,
            storeId: goods.storeId
          }
        }),
        "activityDetailName": item[0],
        "prizeType": "goods",

      }
    })
    let params = {
      file: e.target.files[0],
      activityVo: JSON.stringify({
        activityDetailVos: activityVo
      })
    }
    await apiPlatformActivitySheetExcelImport(params)
      .then((res) => {
        if (res.code === 0) {
          const { code, data, codeMessage } = res.data
          if (code === 0) {
            this.setState({
              // goodsSku: this.state.goodsSku,
            }, () => {
              this.props.addGoods({ goodsSku: [] })
              let { goodsSku, activityType } = this.state
              let checkGoods = []

              data.forEach(good => {
                // console.log(good, 'sssdddd');
                good.hasJoinSku = true
                good.skuInfoVos.forEach(item => {
                  item.flag = true
                  item.aliasFlag = true
                  item.isJoinFlag = true
                  activityType === 'FULL_GIFT' && (item.activityPrice = 0)
                  item.activityPrice = (Number(item.activityGoodsSkuPrice) / 100).toFixed(2)
                })
                goodsSku[index][1].push({
                  ...good,
                  activityPrice: null,
                  Promotions: goodsSku[index][0]
                })
                checkGoods.push(goodsSku[index][0] + '-' + good.goodsId)
                // this.chooseGoods(item)
              })
              this.setState({
                goodsSku,
                checkGoods: checkGoods
              })
              this.props.addGoods({ goodsSku: goodsSku })
            })
          } else if (code == 5000) {
            Modal.error({
              title: codeMessage,
              width: 500,
              content: (
                <div style={{ maxHeight: 500, overflowY: 'auto' }}>
                  {
                    data.map((item, index) => {
                      return <p key={index}>{item}</p>
                    })
                  }
                </div>
              ),
            });

          } else {
            message.error(codeMessage)
          }


        } else {
          message.error(result.codeMessage)
        }
      })
      .catch((err) => {

      })
      .finally(() => {
        // // setUploading(false);
        // importBtnDom.setAttribute('type', 'text')
        // setTimeout(() => {
        //   importBtnDom.setAttribute('type', 'file')

        // }, 300);
      });

  }

  addPromotions = () => {
    this.setState({
      num: null,
      isModalVisible: true,
      modalTitle: '添加活动专区',
    }, () => {
      this.formRef.current.setFieldsValue({ num: null })
    })

  }

  // 活动专区移除
  delPromotions = (key, index) => {
    let { goodsSku } = this.state
    goodsSku.splice(index, 1)
    this.setState({
      goodsSku
    })
    this.props.addGoods({ goodsSku: goodsSku })
  }
  // 活动专区添加商品
  addGoods = (key, val, index) => {
    let { goodsSku, nowStep } = this.state
    let checkGoods = []
    goodsSku.forEach(item => {
      let arr = item[1].map(item2 => item[0] + '-' + item2.goodsId)
      if (arr.length > 0) checkGoods = checkGoods.concat(arr)
    })
    this.setState({
      nowStep: index,
      checkGoods: checkGoods,
      goodsName: ''
    },()=>{
      this.getData()
    })
    this.props.addGoods({ goodsSku: goodsSku })
    
  }
  // 选中商品
  chooseGoods = (goods) => {
    let { goodsSku, nowStep, activityType } = this.state
    goods.hasJoinSku = true
    goods.skuInfoVos.forEach(item => {
      item.flag = true
      item.aliasFlag = true
      item.isJoinFlag = true
      item.activityPrice = null
      activityType === 'FULL_GIFT' && (item.activityPrice = 0)
    })
    if (this.getChoosed(goods.goodsId) && this.getChoosed(goods.goodsId) !== goodsSku[nowStep][0]) return
    let findIndex = goodsSku[nowStep][1].findIndex(item => item.goodsId === goods.goodsId)
    if (findIndex > -1) {
      goodsSku[nowStep][1].splice(findIndex, 1)
    } else {
      goodsSku[nowStep][1].push({ ...goods, activityPrice: null, Promotions: goodsSku[nowStep][0] })
    }
    let checkGoods = []
    goodsSku.forEach(item => {
      let arr = item[1].map(item2 => item[0] + '-' + item2.goodsId)
      if (arr.length > 0) checkGoods = checkGoods.concat(arr)
    })
    this.setState({
      goodsSku,
      checkGoods: checkGoods
    })
    // console.log(goodsSku, 'goodsSkugoodsSkugoodsSku');
    this.props.addGoods({ goodsSku: goodsSku })
  }
  goodsSubmit = () => {
    this.setState({
      nowStep: -1,
    })
  }

  pageChange(e) {
    this.setState({ pageNo: e }, () => {
      this.getData()
    })

  }

  getChoosed(id) {
    let { goodsSku, checkGoods } = this.state
    // console.log(checkGoods)
    let flag = checkGoods.filter(item => item.split('-')[1] === id)
    if (flag.length > 0) return flag[0].split('-')[0]
  }

  // 在拖动结束时
  onDragEnd = (result) => {
    const { goodsSku } = this.state
    const sourceIndex = result.source.index; //原位置索引
    this.setState({
      capture: false
    })
    if (!result.destination) return
    const destinationIndex = result.destination.index;//拖拽后得位置索引
    if (sourceIndex === destinationIndex) return
    let key = result.draggableId.split('_')[1]
    const [draggedItem] = goodsSku.splice(sourceIndex, 1)
    goodsSku.splice(destinationIndex, 0, draggedItem);
    this.setState({
      goodsSku: goodsSku,
    });
  }
  // 在捕获之前
  onBeforeCapture = (result) => {
    this.setState({
      capture: true
    })
  };
  // 在拖动开始之前
  onBeforeDragStart = (result) => {
    // console.log(result, '在拖动开始之前');
  };
  // 在拖动开始时
  onDragStart = (result) => {
    // console.log(result, '在拖动开始时');
  };
  // 在拖动变化时
  onDragUpdate = (result) => {
    // console.log(result, '在拖动变化时');
  };

  onMouseEnter() {
    this.setState({
      isDragDisabled: true
    })
  }

  render() {
    let {
      goodsList,
      columns,
      num,
      isDragDisabled,
      modalTitle,
      activityType,
      capture,
      isModalVisible,
      goodsSku,
      checkGoods,
      nowStep,
      nowPromotions,
      pageNo,
      pageSize,
      totalCount,
    } = this.state
    const { mode, isProprietary } = this.props
    return (
      <DragDropContext onDragEnd={this.onDragEnd}
        onBeforeCapture={this.onBeforeCapture}
        onBeforeDragStart={this.onBeforeDragStart}
        onDragStart={this.onDragStart}
        onDragUpdate={this.onDragUpdate}
      >
        <div className="PromotionsBox">
          {
            /* 专区 */
            nowStep === -1 ? <div className="Promotions">
              <TheButton type="default" size="middle" className="PromotionsAdd"
                onClick={this.addPromotions}>
                添加活动专区
              </TheButton>
              <Droppable droppableId="mymodal">
                {(provided) => (
                  <ul className="PromotionsList" ref={provided.innerRef}
                    {...provided.droppableProps}>
                    {
                      goodsSku.map((item, index) => {
                        return (
                          <Draggable isDragDisabled={isDragDisabled}
                            draggableId={'DraggableId_' + item[0]} index={index}
                            key={item[0] + 'Draggable_Key'}>
                            {(provided) => (
                              <li key={'Promotions-' + item[0]} ref={provided.innerRef}
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}>
                                <div style={{ paddingBottom: 20 }}
                                  onMouseEnter={() => this.onMouseEnter}>
                                  <h2 onClick={() => this.editPromotions(item[0], item[1])}>{item[0]} </h2>
                                  <TheButton type="default" size="middle"
                                    className="goodsAdd"
                                    onClick={() => this.addGoods(item[0], item[1], index)}>
                                    添加商品
                                  </TheButton>
                                  <Popconfirm title="是否确认移除？" okText="是"
                                    cancelText="否"
                                    onConfirm={() => this.delPromotions(item[0], index)}>
                                    <TheButton type="default" size="middle"
                                      className="goodsAdd">
                                      移除专区
                                    </TheButton>
                                  </Popconfirm>

                                  {
                                    activityType === 'FULL_GIFT' && <div style={{
                                      display: 'inline-block',
                                      position: 'relative'
                                    }}>
                                      &nbsp;&nbsp;&nbsp;&nbsp;满
                                      <InputNumber
                                        style={{ width: 120, margin: '0 5px' }}
                                        max={100000000000}
                                        min={0}
                                        precision={2}
                                        defaultValue={item[2]}
                                        onChange={(val) => this.thresholdPriceChange(val, index)} />元
                                      {
                                        !item[3] && <div style={{
                                          color: 'red',
                                          fontSize: 12,
                                          transform: "scale(1)",
                                          position: 'absolute',
                                          left: 35,
                                          bottom: -20
                                        }}>请填写金额</div>
                                      }
                                    </div>
                                  }
                                  {isProprietary === "Y" && <><TheButton type="link" size="middle"
                                    className="goodsAdd">
                                    <a href="https://hqmimage.oss-cn-beijing.aliyuncs.com/%E6%B4%BB%E5%8A%A8%E5%95%86%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF%28%E5%B8%A6%E4%BB%B7%E6%A0%BC%29.xlsx"
                                      download={'商品导入模板'}>下载商品导入模板</a>
                                  </TheButton>
                                  <TheButton type="default" size="middle"
                                    className="goodsImport">
                                    <input type="file" className="importBtn" name="file"
                                      onChange={(e) => this.importGoods(e, index)} />
                                    批量导入商品
                                  </TheButton></>}
                                  {
                                    this.props.checkIng && item[1].length === 0 &&
                                    <div style={{
                                      color: 'red',
                                      fontSize: 12,
                                      transform: "scale(1)"
                                    }}>请选择活动商品</div>
                                  }
                                </div>
                                {
                                  item[1].length > 0 ?
                                    <table
                                      className={`table ${capture ? 'put-away' : 'expand'}`}
                                    >
                                      <thead className="thead">
                                        <tr>
                                          {columns.map((th, th_index) => {
                                            return <th
                                              key={new Date() + "th" + th_index}
                                              className="td">{th.title}</th>
                                          })}
                                        </tr>
                                      </thead>
                                      <tbody className="tbody">
                                        {
                                          item[1].map((data, data_index) => {
                                            return data.skuInfoVos.map((sku, tr_index) => {
                                              return tr_index === 0 ?
                                                <tr className={["tr", !data.hasJoinSku ? 'joinLen0' : ''].join(' ')}
                                                  key={new Date() + tr_index}
                                                  style={{ background: mode === 'edit' && data.missGoods ? 'rgba(230, 162, 60,.5)' : '' }}>
                                                  <td className="td"
                                                    rowSpan={data.skuInfoVos.length}>{data.goodsName}</td>
                                                  <td className="td"
                                                    rowSpan={data.skuInfoVos.length}>{data.goodsId}</td>

                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>{sku.skuAttributes[tr_index].goodsKeyName + ':' + sku.skuAttributes[tr_index].goodsValue}</td>
                                                  {
                                                    activityType === 'FULL_GIFT' &&
                                                    <td className="td"
                                                      style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>
                                                      <Input
                                                        defaultValue={sku.aliasName}
                                                        onChange={(val) => this.aliasChange(val, sku)} />
                                                      {
                                                        !sku.aliasFlag &&
                                                        <span
                                                          style={{
                                                            color: 'red',
                                                            fontSize: 12,
                                                            transform: "scale(.5)"
                                                          }}>请填写商品别名</span>
                                                      }
                                                    </td>
                                                  }
                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>{data.storeName}</td>
                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>{(sku.skuOriginalPrice / 100).toFixed(2)}</td>
                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>{(sku.skuCurrentPrice / 100).toFixed(2)}</td>

                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>
                                                    {activityType !== 'FULL_GIFT' ?
                                                      <InputNumber
                                                        disabled={(mode === 'edit' && (sku.missSku || data.missGoods)) || activityType === 'FULL_GIFT'}
                                                        style={{ outline: !sku.flag ? '1px solid red' : '' }}
                                                        max={100000000000}
                                                        min={0}
                                                        key={sku.goodsSkuId}
                                                        step={0.01}
                                                        precision={2}
                                                        defaultValue={sku.activityPrice}
                                                        onChange={(val) => this.acPriceChange(val, sku)} />
                                                      : <div
                                                        style={{ width: 120 }}>{sku.activityPrice}</div>}
                                                    {

                                                      !sku.flag &&
                                                      <p style={{
                                                        color: 'red',
                                                        fontSize: 12,
                                                        margin: "5px 0 0 0"
                                                        // transform: "scale(.5)"
                                                      }}>请填写活动价格</p>
                                                    }
                                                  </td>
                                                  {/*<td className="td"*/}
                                                  {/*    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>*/}
                                                  {/*    <Switch*/}
                                                  {/*        defaultChecked={sku.isJoinFlag}*/}
                                                  {/*        checkedChildren="是"*/}
                                                  {/*        unCheckedChildren="否"*/}
                                                  {/*        onChange={(val) => this.isJoinChange(val, sku)}/>*/}
                                                  {/*</td>*/}
                                                  <td className={`td ${!data.hasJoinSku ? "joinSkuEmpty" : ""}`}
                                                    style={{ background: '#fff' }}
                                                    rowSpan={data.skuInfoVos.length}>
                                                    <Popconfirm
                                                      title="是否确认移除？"
                                                      okText="是"
                                                      cancelText="否"
                                                      onConfirm={() => this.delGoods(data, data_index)}>
                                                      <TheButton danger type="link">删除</TheButton>
                                                    </Popconfirm>
                                                    <Popconfirm
                                                      title="是否确认置顶？"
                                                      okText="是"
                                                      cancelText="否"
                                                      onConfirm={() => this.stick(data, data_index)}>
                                                      <TheButton type="link">置顶</TheButton>
                                                    </Popconfirm>
                                                  </td>
                                                </tr>
                                                :
                                                <tr className={["tr", !data.hasJoinSku ? 'joinLen0' : ''].join(' ')}
                                                  key={new Date() + tr_index}>
                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>{sku.skuAttributes.map(attr => {
                                                      return attr.goodsKeyName + ':' + attr.goodsValue
                                                    }).join(';')}</td>
                                                  {
                                                    activityType === 'FULL_GIFT' &&
                                                    <td className="td"
                                                      style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>
                                                      <Input
                                                        defaultValue={sku.aliasName}
                                                        onChange={(val) => this.aliasChange(val, sku)} />
                                                      {
                                                        !sku.aliasFlag &&
                                                        <span
                                                          style={{
                                                            color: 'red',
                                                            fontSize: 12,
                                                            transform: "scale(.5)"
                                                          }}>请填写商品别名</span>
                                                      }
                                                    </td>
                                                  }
                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>{data.storeName}</td>

                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>{(sku.skuOriginalPrice / 100).toFixed(2)}</td>
                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>{(sku.skuCurrentPrice / 100).toFixed(2)}</td>

                                                  <td className="td"
                                                    style={{ background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : '' }}>
                                                    {activityType !== 'FULL_GIFT' ?
                                                      <InputNumber
                                                        disabled={(mode === 'edit' && (sku.missSku || data.missGoods)) || activityType === 'FULL_GIFT'}
                                                        style={{ outline: !sku.flag ? '1px solid red' : '' }}
                                                        max={100000000000}
                                                        min={0}
                                                        key={sku.goodsSkuId}
                                                        step={0.01}
                                                        precision={2}
                                                        defaultValue={sku.activityPrice}
                                                        onChange={(val) => this.acPriceChange(val, sku)} />
                                                      : <div
                                                        style={{ width: 120 }}>{sku.activityPrice}</div>}
                                                    {
                                                        !sku.flag &&
                                                        <p style={{
                                                          color: 'red',
                                                          fontSize: 12,
                                                          margin: "5px 0 0 0"
                                                          // transform: "scale(.5)"
                                                        }}>请填写活动价格</p>
                                                    }
                                                  </td>
                                                  {/*<td className="td"*/}
                                                  {/*    style={{background: mode === 'edit' && (sku.missSku || data.missGoods) ? 'rgba(230, 162, 60,.5)' : ''}}>*/}
                                                  {/*    <Switch*/}
                                                  {/*        defaultChecked={sku.isJoinFlag}*/}
                                                  {/*        checkedChildren="是"*/}
                                                  {/*        unCheckedChildren="否"*/}
                                                  {/*        onChange={(val) => this.isJoinChange(val, sku)}/>*/}
                                                  {/*</td>*/}
                                                </tr>
                                            })
                                          })
                                        }
                                      </tbody>
                                    </table> : null
                                }
                              </li>
                            )}
                          </Draggable>

                        )
                      })
                    }
                    {provided.placeholder}
                  </ul>
                )}


              </Droppable>

            </div> : null
          }
          {
            /* 商品列表 */
            nowStep > -1 ? <div className="goodsList">
              <div className="title">{goodsSku && goodsSku.length > 0 && goodsSku[nowStep][0]}</div>
              <Input className="goodsSearch" onPressEnter={this.onSearch.bind(this)}
                prefix={<SearchOutlined className="site-form-item-icon" />} placeholder='搜索商品' />
              {
                goodsList.length > 0 ? <ul className="list" id="goodsList">
                  {
                    goodsList.map(goods => {
                      return (
                        <li key={goods.goodsId} data-txt={this.getChoosed(goods.goodsId)}
                          className={this.getChoosed(goods.goodsId) ? 'checked' : null}
                          onClick={() => this.chooseGoods(goods)}>
                          <img src={goods.goodsShowImages.split(',')[0]} alt="" />
                          <p><strong>{goods.storeName}</strong></p>
                          <p>{goods.goodsName}</p>
                          {/* <p className="price">￥ {Number(goods.currentPrice / 100).toFixed(2)}</p> */}
                        </li>
                      )
                    })
                  }


                </ul> : null
              }
              <Space direction={'vertical'} align={'center'}>
                <Pagination size="small" current={pageNo} total={totalCount} showSizeChanger={false}
                            onChange={this.pageChange.bind(this)} />
                <TheButton type="primary" size="middle" className="goodsAdd"
                           onClick={this.goodsSubmit}>
                  确定
                </TheButton>
              </Space>

            </div> : null

          }

          <Modal title={modalTitle} open={isModalVisible} onOk={this.handleOk}
            onCancel={this.handleCancel}>
            <Form
              ref={this.formRef}
              initialValues={{
                num: num
              }}
            >
              <Form.Item
                name="num"
                style={{marginTop:20}}
                rules={[
                  {
                    required: true,
                    message: '请输入专区名称!',
                  },
                  {
                    validator: async (_, value) => {

                      if (value.includes('-')) {
                        return Promise.reject('禁止使用符号‘-’，请使用‘~’替代。');
                      }
                      return Promise.resolve();
                    },
                  }
                ]}
              >
                <Input
                    placeholder={'请输入专区名称!'}
                    style={{ width: '100%' }}
                />
              </Form.Item>
            </Form>

          </Modal>
        </div>
      </DragDropContext>

    )
  }
}

export default Goods
